<template>
    <div class='home-container chooseClass-page'>
        <div class="right-content white-color chooseClass">
            <div class="title">
                <img src="../../src/assets/img/welcome/book.png" alt="" class='star'>
                <span>选择课程</span>
            </div>
            <div class="search-contain">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="班级">
                        <el-select v-model="form.region" placeholder="全部" class="status-input">
                            <el-option label="数学" value="shanghai"></el-option>
                            <el-option label="语文" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程类型">
                        <el-select v-model="form.region" placeholder="全部" class="status-input">
                            <el-option label="数学" value="shanghai"></el-option>
                            <el-option label="语文" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-select v-model="form.region" placeholder="全部" class="status-input">
                            <el-option label="数学" value="shanghai"></el-option>
                            <el-option label="语文" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="讲师">
                        <el-select v-model="form.region" placeholder="全部" class="status-input">
                            <el-option label="数学" value="shanghai"></el-option>
                            <el-option label="语文" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="助教">
                        <el-select v-model="form.region" placeholder="全部" class="status-input">
                            <el-option label="数学" value="shanghai"></el-option>
                            <el-option label="语文" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="content-contain">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{background:'#EFF1F6',color:'#1C1C1C'}" stripe>
                    <el-table-column label="班级" prop="id">
                    </el-table-column>
                    <el-table-column label="课程类型" prop="name">
                    </el-table-column>
                    <el-table-column label="课程名称" prop="name">
                    </el-table-column>
                    <el-table-column label="讲师" prop="name">
                    </el-table-column>
                    <el-table-column label="助教" prop="name">
                    </el-table-column>
                    <el-table-column label="选择课程">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="chooseClass(scope.$index, scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer-contain">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[20, 50, 100, 200]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
                <div class='go-page'>确定</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            headerList: ['会员', '班级', '班级列表'],
            openeds: ['5', '5-2'],
            activeTab: 'Member',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [{
                id: '高三理科综合',
                name: '这是今天报名的学生',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }, {
                id: '高三理科综合',
                name: '这是今天报名的学生',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }, {
                id: '高三理科综合',
                name: '这是今天报名的学生',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        chooseClass() {
            this.$confirm('您已成功选择这个课程，是否确认？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

            }).catch(() => {

            })
        }
    },
    components: {}
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }
    .chooseClass-page{
        background: rgba(238, 244, 249, 1)
    }

    .search-contain {
        // margin-top: 20px;
        padding-left: 20px;
        padding-top: 24px;
    }

    .content-contain {
        // padding-left: 16px;
    }

    .right-container {
        background: #ffffff;
        height: 100%;
    }

    .operate {
        cursor: pointer;
        margin-right: 20px;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .grid-content {
        span {
            position: relative;
            margin-right: 5px;
            top: 3px;
        }
    }

    .white-color {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0px 0px rgba(119, 151, 178, 0.16);
        border-radius: 4px;
        height: calc(100% - 50px);
        width: calc(100% - 60px);

        margin: auto;

        .title {
            width: 100%;
            height: 56px;
            border-bottom: solid 1px #E8E9EA;
            line-height: 56px;

            img {
                margin-left: 24px;
                margin-right: 16px;
                position: relative;
                top: 2px;
                width: 20px;
                height: 20px;
                border-radius: 1px;

            }

            span {
                font-size: 20px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(28, 28, 28, 1);

            }
        }
    }

    .home-container {
        padding-top: 20px;
    }

</style>
<style lang="less">
    .el-table {
        border: 1px solid rgba(223, 230, 236, 1) !important;
        border-bottom: none !important;
    }

    .el-table__header-wrapper {
        height: 40px !important;
        background: rgba(239, 241, 246, 1) !important;
    }

    .el-table__header tr,
    .el-table__header th {
        padding: 0 !important;
        height: 40px !important;
    }

    .el-table__body-wrapper {
        .el-row {
            margin-bottom: 16px !important;

            &:first-child {
                margin-top: 10px !important;
            }
        }

        tbody {

            .table__row,
            td {
                padding: 8px 0px !important;

            }

        }
    }

    .status-input {
        width: 150px !important;
        height: 40px !important;
    }

    /*.el-form-item__content {*/
    /*    margin-right: 20px*/
    /*}*/
    // 分页样式
    .el-pagination {
        .el-pager {
            .number {
                margin: 0px !important;
                background: #ffffff !important;
                border: 1px solid rgba(209, 219, 229, 1);
                color: #546374 !important;
                font-weight: 400;
                border-left: none
            }

            li.active {
                background-color: #409EFF !important;
                color: #fff !important;
                border-radius: 0px !important;
                width: 29px !important;
                height: 28px !important;
                border: solid 1px #409EFF !important;
            }

            li {
                border-radius: 0px !important;
            }
        }

        .btn-prev,
        .btn-next {
            margin: 0px !important;
            background: #ffffff !important;
            border: 1px solid rgba(209, 219, 229, 1);

        }

        .btn-prev {
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }

        .btn-next {
            border-top-left-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
        }

        .btn-next {
            border-left: none;
        }
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    .chooseClass {
        .el-button:focus {
            background: rgba(85, 168, 253, 1) !important;
            color: #fff !important;
        }

        .el-button:hover {
            background: rgba(85, 168, 253, 1) !important;
            color: #fff !important;
        }

    }

    // 日历
    .el-picker-panel__body {
        font-family:PingFang-SC-Regular!important;
    }
    @import url('../../src/assets/less/override-element-ui.less');

</style>
